{extend name="default/layout" /}

{block name="content"}
<div class="flex items-center justify-center bg-gray-50 min-h-screen">
    <div class="max-w-md w-full text-center px-4">

        <!-- 404图标 -->
        <div class="mb-8">
            <div class="text-8xl font-bold text-blue-500 opacity-50 mb-4">404</div>
            <i class="fas fa-exclamation-triangle text-6xl text-amber-500"></i>
        </div>

        <!-- 错误信息 -->
        <div class="mb-8">
            <h1 class="text-2xl font-bold text-gray-800 mb-4">页面未找到</h1>
            <p class="text-gray-600 mb-6">
                抱歉，您访问的页面不存在或已被删除。<br>
                请检查网址是否正确，或者返回首页继续浏览。
            </p>
        </div>
        
        <!-- 操作按钮 -->
        <div class="space-y-4">
            <a href="/" 
               class="inline-block w-full bg-blue-500 text-white py-3 px-6 rounded-sm hover:bg-blue-600 transition-colors font-medium">
                <i class="fas fa-home mr-2"></i>
                返回首页
            </a>
            
            <button onclick="history.back()" 
                    class="w-full border border-gray-300 py-3 px-6 rounded-sm hover:bg-gray-50 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>
                返回上一页
            </button>
        </div>
        
        <!-- 搜索框 -->
        <div class="mt-8">
            <p class="text-sm text-gray-600 mb-3">或者搜索您需要的内容：</p>
            <div class="relative">
                <input type="text" id="search-404" placeholder="搜索商品..." 
                       class="w-full px-4 py-2 border border-gray-300 rounded-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <button onclick="doSearch404()" 
                        class="absolute right-2 top-2 text-gray-400 hover:text-gray-600">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>
        
        <!-- 热门链接 -->
        <div class="mt-8">
            <p class="text-sm text-gray-600 mb-3">热门页面：</p>
            <div class="flex flex-wrap justify-center gap-2">
                <a href="/" class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-gray-200 transition-colors">首页</a>
                <a href="/tag" class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-gray-200 transition-colors">商品标签</a>
                <a href="{:_url_('user.index')}" class="px-3 py-1 bg-gray-100 rounded-full text-sm hover:bg-gray-200 transition-colors">用户中心</a>
            </div>
        </div>
        
        <!-- 联系信息 -->
        <div class="mt-8 pt-8 border-t border-gray-200">
            <p class="text-xs text-gray-400">
                如果您认为这是一个错误，请联系我们：
                <a href="mailto:{:conf('site_email')}" class="text-blue-500 hover:underline">{:conf('site_email')}</a>
            </p>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    // 搜索功能
    function doSearch404() {
        const keyword = $('#search-404').val().trim();
        if (keyword) {
            window.location.href = '/search-' + encodeURIComponent(keyword);
        }
    }

    // 页面加载完成后初始化
    $(document).ready(function() {
        // 聚焦搜索框
        $('#search-404').focus();

        // 回车搜索
        $('#search-404').on('keypress', function(e) {
            if (e.key === 'Enter') {
                doSearch404();
            }
        });

        // 记录404页面访问
        console.log('404 page visited:', window.location.href);

        // 可以在这里添加404页面的统计代码
    });
</script>
{/block}
